<template>
  <view class="container">
    <!-- 基础用法 -->
    <view class="section">
      <view class="title">基础用法</view>
      <x-data-select
        v-model="selected1"
        :options="options1"
        placeholder="请选择城市"
        popup-height="420rpx"
        @change="onChange"
      />
      <view class="result">当前选择: {{ selected1 }}</view>
    </view>
    
    <!-- 搜索 + 分页 -->
    <view class="section">
      <view class="title">搜索 + 分页加载</view>
      <x-data-select
        v-model="selected2"
        :options="options2"
        :searchable="true"
        :page-size="20"
        placeholder="搜索城市"
        @change="onChange"
      />
      <view class="result">当前选择: {{ selected2 }}</view>
    </view>
    
    <!-- 自定义键名 -->
    <view class="section">
      <view class="title">自定义键名</view>
      <x-data-select
        v-model="selected3"
        :options="options3"
        label-key="name"
        value-key="id"
        placeholder="选择景点"
        @change="onChange"
      />
      <view class="result">当前选择: {{ selected3 }}</view>
    </view>
    
    <!-- 远程搜索 -->
    <view class="section">
      <view class="title">远程搜索</view>
      <x-data-select
        v-model="selected4"
        :searchable="true"
        :remote="true"
        :load-selected="true"
        placeholder="搜索城市"
        @change="onChange"
        @load-data="onLoadData"
        @load-selected="onLoadSelected"
      />
      <view class="result">当前选择: {{ selected4 }}</view>
    </view>
    
    <!-- 自定义样式 -->
    <view class="section">
      <view class="title">自定义样式</view>
      <x-data-select
        v-model="selected5"
        :options="options1"
        input-width="200rpx"
        input-height="60rpx"
        placeholder="请选择城市"
        @change="onChange"
      />
      <view class="result">当前选择: {{ selected5 }}</view>
    </view>
  </view>
</template>

<script>
import xSelectPlus from '@/uni_modules/x-select-plus/components/x-select-plus.vue'

export default {
  components: {
    xSelectPlus
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.component-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style> 